<template>
	<view class="medicalRecordList-content" v-if="bottomTabNumber === 0">
		<view class="search">
			<input v-model="searchText" @input="onKeyInput" type="text" placeholder="输入关键词搜索" :style="{backgroundImage: 'url(' +  `${prefix_image}/homepage/IntegralRecord/myOrder-search.png` + ')'}" />
		</view>

		<view class="medicalRecordList-tabButton">
			<view class="medicalRecordList-tabButton-list" :class="{active: tabIndex === 0}" @click="clickTab(0)">{{`全部`}}</view>
			<view class="medicalRecordList-tabButton-list" :class="{active: tabIndex === 1}" @click="clickTab(1)">{{`待处理`}}</view>
			<view class="medicalRecordList-tabButton-list" :class="{active: tabIndex === 2}" @click="clickTab(2)">{{`已处理`}}</view>
		</view>

		<view class="medicalRecordList-animatal-list">
			<view v-for="(item,index) in recordList" :key="index" class="medicalRecordList-animatal-list-inner">
				<view class="medicalRecordList-animatal-list-title">
					<text class="medicalRecordList-animatal-list-title-text1">{{item?.pets?.name}}</text>
					<text class="medicalRecordList-animatal-list-title-text2">{{['未知', '公', '母'][item?.pets?.gender]}}</text>
					<text class="medicalRecordList-animatal-list-title-text3">|</text>
					<text class="medicalRecordList-animatal-list-title-text4">{{item?.pets?.birthday}}岁</text>
					<text class="medicalRecordList-animatal-list-title-text5">{{item?.pets?.weight}}公斤</text>
				</view>
				<view class="medicalRecordList-animatal-list-content">
					{{!item?.description ? '暂无' : item?.description}}
				</view>
				<view class="medicalRecordList-animatal-bottom">
					<text class="medicalRecordList-animatal-bottom-left">{{formatDate(item?.createtime)}}</text>
					<view v-if="item?.registered_type == '1'" class="medicalRecordList-animatal-bottom-right" @tap="gotoMedicalRecordDetails(item?.id)">去接诊</view>
					<view v-if="item?.registered_type == '2'" class="medicalRecordList-animatal-bottom-right" style="background: #F0F0F0;" @tap="gotoMedicalRemakeDetails(item.id)">重新处理</view>
				</view>
			</view>
		</view>
	
	</view>
	
	<view class="medicalRecordList-content" v-else>
		<view class="search">
			<input v-model="searchText2" @input="onKeyInput2" type="text" placeholder="输入关键词搜索" :style="{backgroundImage: 'url(' +  `${prefix_image}/homepage/IntegralRecord/myOrder-search.png` + ')'}" />
		</view>
		
		<view class="medicalRecordList-tabButton">
			<view class="medicalRecordList-tabButton-list" :class="{active: tabIndex === 0}" @click="clickTab(0)">{{`全部`}}</view>
			<view class="medicalRecordList-tabButton-list" :class="{active: tabIndex === 1}" @click="clickTab(1)">{{`待处理`}}</view>
			<view class="medicalRecordList-tabButton-list" :class="{active: tabIndex === 2}" @click="clickTab(2)">{{`已处理`}}</view>
		</view>
		<view class="medicalRecordList-animatal-list">
			<view v-for="(item,index) in videoList" :key="index" class="medicalRecordList-animatal-list-inner1" @tap="gotoPunchInvideoDetail(item.id)">
				<view class="medicalRecordList-animatal-list-inner1-left">
					<image :src="item.image" />
				</view>
				<view class="medicalRecordList-animatal-list-inner1-right">
					<view class="medicalRecordList-animatal-list-inner1-right1">
						<text>{{item.pets.name}}</text>
						<text>{{['公', '母', '未知'][item.pets.gender]}}</text>
						<text style="font-weight: 400;opacity: 0.2;">|</text>
						<text>{{item.pets.birthday}}</text>
						<text>{{item.pets.weight}}公斤</text>
					</view>
					<view class="medicalRecordList-animatal-list-inner1-right2">
						{{formatDate(item.createtime)}}
					</view>
					<view style="justify-content: flex-end;display: flex;">
						<view class="medicalRecordList-animatal-list-inner1-right3">回复</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	
	<!-- 底部tab -->
	<view class="medicalRecordList-bottomTab">
		<view class="medicalRecordList-bottomTab1" @tap="tabMedicalRecordList()">
			<image v-show="bottomTabNumber === 0" :src="`${prefix_image}/homepage/IntegralRecord/medicalRecordList-icon1-active.png`" />
			<image v-show="bottomTabNumber === 1" :src="`${prefix_image}/homepage/IntegralRecord/medicalRecordList-icon1.png`" />
			<text>病历列表</text>
		</view>
		<view class="medicalRecordList-bottomTab2" @tap="scanCode">
			<image :src="`${prefix_image}/homepage/IntegralRecord/medicalRecordList-qrcode.png`" />
		</view>
		<view class="medicalRecordList-bottomTab3" @tap="tabVedio()">
			<image v-show="bottomTabNumber === 1" :src="`${prefix_image}/homepage/IntegralRecord/medicalRecordList-icon2-active.png`" />
			<image v-show="bottomTabNumber === 0" :src="`${prefix_image}/homepage/IntegralRecord/medicalRecordList-icon2.png`" />
			<text>打卡视频</text>
		</view>
	</view>
	
</template>

<script>
	import store from '@/store';
	import config from '@/hooks/useConfig.js'
	import {
		defineComponent,
		reactive,
		toRefs,
		getCurrentInstance,
		computed
	} from "vue"
	import {
		onLoad,
		onReachBottom,
		onShow
	} from '@dcloudio/uni-app'
	export default defineComponent({
		setup() {
			const {
				height,
				statusBarHeight
			} = store.state.phoneInfo
			const userInfo = store.state.userInfo
			const {
				prefix_image
			} = config()
			const data = reactive({
				prefix_image,
				statusBarHeight,
				height,
				bottomTabNumber: 0,
				tabIndex: 1,
				recordList: [],
				total: 0, // 全部数量
				doingNum: 0, // 待处理数量
				doneNum: 0, // 已处理数量
				videoList: [], // 打卡视频列表
				queryInfo: {
					page: 1,
					size: 10,
					pageTotal: 0
				},
                searchText: '',
				searchText2: "",
			})
			const {
				appContext: {
					config: {
						globalProperties: global

					},
				},
			} = getCurrentInstance()
			let formatDate = computed(() => {
				return function(time) {
					const date = new Date(time * 1000)
					const year = date.getFullYear()
					const month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
					const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
					const hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
					const minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
					const seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
					return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds
				}
			})
			onShow(() => {
				// 获取病历列表
				global.$request.post('/v1/api/cases/list', {
					page: data.queryInfo.page,
					state: data.tabIndex, // 0: 全部 1: 未处理 2: 已处理
					doctor_id: userInfo.id
				}).then(res => {
					if (res.code === 1) {
						data.recordList = res.data.data
						data.queryInfo.pageTotal = res.data.total
					}
				})
			})

			// 触底加载
			onReachBottom(() => {
				const queryTotal = data.queryInfo.page * data.queryInfo.size
				console.log('查询条数', queryTotal)
				console.log('共有数据条数', data.queryInfo.pageTotal)
				if (queryTotal < data.queryInfo.pageTotal) {
					data.queryInfo.page++
					getMore()
				} else {
					uni.showToast({
						title: '暂无更多',
						icon: 'none',
						duration: 2000
					})
				}
			})

			// 设置导航栏
			const setNavText = (text) => {
				uni.setNavigationBarTitle({
					title: text
				})
			}
			
			// 分页
			const getMore = () => {
				if (data.bottomTabNumber === 0) {
					// 获取病历列表
					global.$request.post('/v1/api/cases/list', {
						page: data.queryInfo.page,
						state: data.tabIndex, // 0: 全部 1: 未处理 2: 已处理
						doctor_id: userInfo.id
					}).then(res => {
						if (res.code === 1) {
							data.recordList.push(...res.data.data)
						}
					})
				} else if (data.bottomTabNumber === 1) {
					// 获取打卡视频列表
					global.$request.post('/v1/api/video/doctorVideoList', {
						store_id: userInfo.store_id,
						page: data.queryInfo.page,
						type: 1, // 1: 打开视频 2: 活动视频
						status: data.tabIndex // 0: 全部 1: 待处理 2: 已处理
					}).then(res => {
						if (res.code === 1) {
							data.videoList.push(...res.data.data)
						}
					})
				}
			}

			// 切换tab
			const clickTab = (index) => {
				data.tabIndex = index
				data.queryInfo = {
					page: 1,
					size: 10,
					pageTotal: 0
				}
				if (data.bottomTabNumber === 0) {
					// 获取病历列表
					global.$request.post('/v1/api/cases/list', {
						page: data.queryInfo.page,
						state: index, // 0: 全部 1: 未处理 2: 已处理
						doctor_id: userInfo.id,
					}).then(res => {
						if (res.code === 1) {
							data.recordList = res.data.data
							data.queryInfo.pageTotal = res.data.total
						}
					})
				} else if (data.bottomTabNumber === 1) {
					// 获取打卡视频列表
					global.$request.post('/v1/api/video/doctorVideoList', {
						store_id: userInfo.store_id,
						page: data.queryInfo.page,
						type: 1, // 1: 打开视频 2: 活动视频
						status: index // 0: 全部 1: 待处理 2: 已处理
					}).then(res => {
						if (res.code === 1) {
							data.videoList = res.data.data
							data.queryInfo.pageTotal = res.data.total
						}
					})
				}
			}

			// 点击到打卡视频
			const tabVedio = () => {
                // if (data.bottomTabNumber === 1) {
                //     return
                // }
                data.searchText = ''
				data.queryInfo = {
					page: 1,
					size: 10,
					pageTotal: 0
				}
				setNavText('打卡视频')
				data.bottomTabNumber = 1
				// 获取打卡视频列表
				global.$request.post('/v1/api/video/doctorVideoList', {
					store_id: userInfo.store_id,
					page: 1,
					type: 1, // 1: 打卡视频 2: 活动视频
					status: data.tabIndex, // 0: 全部 1: 待处理 2: 已处理
					keywords: data.searchText2
				}).then(res => {
					if (res.code === 1) {
						data.videoList = res.data.data
						data.queryInfo.pageTotal = res.data.total
					}
				})
			}

			const onKeyInput = (event) => {
				console.log(event, "event")
				data.searchText = event.target.value
				tabMedicalRecordList()
			}
			
			const onKeyInput2 = (event) => {
				console.log(event, "event")
				data.searchText2 = event.target.value
				tabVedio()
			}

			const tabMedicalRecordList = () => {
                // if (data.bottomTabNumber === 0) {
                //     return
                // }
                // data.searchText = ''
				data.queryInfo = {
					page: 1,
					size: 10,
					pageTotal: 0
				}
				setNavText('病历列表')
				data.bottomTabNumber = 0
				// 获取病历列表
				global.$request.post('/v1/api/cases/list', {
					page: 1,
					state: data.tabIndex, // 0: 全部 1: 未处理 2: 已处理
					doctor_id: userInfo.id,
					keywords: data.searchText
				}).then(res => {
					if (res.code === 1) {
						data.recordList = res.data.data
						data.queryInfo.pageTotal = res.data.total
					}
				})
			}

			const gotoMedicalRecordDetails = (id) => {
				uni.navigateTo({
					url: `/pages/medicalRecordDetails/index?id=${id}&state=${data.tabIndex}`,
				})
			}

			const gotoMedicalRemakeDetails = (id) => {
				uni.navigateTo({
					url: `/pages/medicalRemakeDetails/index?id=${id}&state=${data.tabIndex}`,
				})
			}

			const gotoPunchInvideoDetail = (id) => {
				uni.navigateTo({
					url: '/pages/punchInvideoDetail/index?id=' + id,
				})
			}

			const gotoPreviewVideo = () => {
				uni.navigateTo({
					// 拍视频
					url: '/packageHome/pages/shotVideo/index'
				})
			}

			const scanCode = () => {
				uni.scanCode({
					onlyFromCamera: true, // 只允许通过相机扫码
					success: function(res) {
						let arr = res.result.split(';').slice(0, 3)
						let obj = {}
						arr.forEach((item, index) => {
                            if (index < 3) {
                                const pairs = item.split(':')
                                const key = pairs[0]
                                const value = pairs[1]
                                obj[key] = value
                            }
						})
                        let paramStr = arr[2].slice(7)
                        let paramObj = JSON.parse(paramStr)
                        if (paramObj.doctor_id) {
                            if (Number(paramObj.doctor_id) !== Number(userInfo.id)) {
                                uni.showModal({
                                    icon: 'none',
                                    title: '该病历已被指派给指定医生',
                                    duration: 2000
                                })
                                return
                            }
                        }
						if (obj.page == 'casesDetails') {
							uni.navigateTo({
								url: '/pages/medicalRemakeDetails/index?id=' + obj.cases_id,
							})
						} else {
							uni.showModal({
								title: '失败',
								icon: 'none',
								duration: 2000
							})
						}
					}
				});
			}

			return {
				...toRefs(data),
				tabVedio,
				tabMedicalRecordList,
				gotoMedicalRecordDetails,
				gotoMedicalRemakeDetails,
				gotoPunchInvideoDetail,
				gotoPreviewVideo,
				clickTab,
				formatDate,
				setNavText,
				scanCode,
				getMore,
				onKeyInput,
				onKeyInput2
			}
		}
	})
</script>

<style lang="stylus" scoped>
	.medicalRecordList-content {
		background: #F6F6F7;
		min-height: 100vh;
		overflow: hidden;
		display: block;
		.search {
			padding: 0rpx 32rpx;
			box-sizing: content-box;
			background-color: #fff;

			input {
				background: #F4F4F4;
				border-radius: 38px;
				// width: 686rpx;
				height: 76rpx;
				// background: url("../../static/IntegralRecord/myOrder-search.png");
				background-repeat: no-repeat;
				background-size: 32rpx 32rpx;
				background-color: #F4F4F4;
				background-position: 24rpx center;
				padding-left: 72rpx;

				font-size: 28rpx;
				font-weight: 400;
				color: #999999;
			}
		}

		.medicalRecordList-tabButton {
			padding: 32rpx;
			background-color: #fff;

			.medicalRecordList-tabButton-list {
				width: auto;
				display: inline-block;
				height: 72rpx;
				background: #F4F4F4;
				border-radius: 36rpx;

				font-size: 28rpx;
				// font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				box-sizing: border-box;
				margin-right: 24rpx;
				text-align: center;
				line-height 72rpx;
				padding: 0rpx 24rpx;
				color: #999999;
			}

			.medicalRecordList-tabButton-list.active {
				background: #FFD300;
				color: #111111;
			}
		}

		.medicalRecordList-animatal-list {
			padding-bottom: 200rpx;
			// display: flex;
			// justify-content: center;
			width: 686rpx;
			margin: 0 auto;
			margin-top: 30rpx;

			.medicalRecordList-animatal-list-inner {
				width: 686rpx;
				// height: 302rpx; 
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 36rpx 25rpx 30rpx 28rpx;
				box-sizing: border-box;
				margin-bottom: 28rpx;

				.medicalRecordList-animatal-list-title {
					display: flex;

					.medicalRecordList-animatal-list-title-text1 {
						font-size: 28rpx;
						// font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #999999;
						padding-right: 20rpx;
					}

					.medicalRecordList-animatal-list-title-text2 {
						font-size: 28rpx;
						// font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #999999;
						padding-right: 20rpx;
					}

					.medicalRecordList-animatal-list-title-text3 {
						font-size: 28rpx;
						// font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #999999;
						padding-right: 20rpx;
					}

					.medicalRecordList-animatal-list-title-text4 {
						font-size: 28rpx;
						// font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #999999;
						padding-right: 20rpx;
					}

					.medicalRecordList-animatal-list-title-text5 {
						font-size: 28rpx;
						// font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #999999;
						padding-right: 20rpx;
					}
				}

				.medicalRecordList-animatal-list-content {
					font-size: 32rpx;
					// font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #333333;
					padding-top: 24rpx;
					padding-bottom: 32rpx;
				}

				.medicalRecordList-animatal-bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.medicalRecordList-animatal-bottom-left {
						font-size: 28rpx;
						// font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}

					.medicalRecordList-animatal-bottom-right {
						width: 144rpx;
						height: 60rpx;
						background: #FFD300;
						border-radius: 30rpx;

						font-size: 26rpx;
						// font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #111111;
						text-align: center;
						line-height: 60rpx;
					}
				}



			}

			.medicalRecordList-animatal-list-inner1 {
				display: flex;
				background-color: #fff;
				width: 686rpx;
				height: 222rpx;
				border-radius: 16rpx;
				padding: 24rpx;
				box-sizing: border-box;
				margin-top: 28rpx;

				.medicalRecordList-animatal-list-inner1-left {
					display: flex;

					image {
						width: 174rpx;
						height: 174rpx;
						border-radius: 16rpx;
					}
				}

				.medicalRecordList-animatal-list-inner1-right {
					padding-left: 24rpx;
					flex: 1;

					.medicalRecordList-animatal-list-inner1-right1 {
						display: flex;

						text {
							font-size: 28rpx;
							// font-family: PingFangSC-Semibold, PingFang SC;
							font-weight: 600;
							color: #333333;
							padding-right 20rpx;
						}
					}

					.medicalRecordList-animatal-list-inner1-right2 {
						font-size: 28rpx;
						// font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						padding-top: 20rpx;
					}

					.medicalRecordList-animatal-list-inner1-right3 {
						width: 144rpx;
						height: 60rpx;
						background: #FFD300;
						border-radius: 30rpx;

						font-size: 26rpx;
						// font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #111111;
						text-align: center;
						line-height: 60rpx;
						margin-top: 20rpx;
					}
				}
			}
		}

		

	}
	
	
	.medicalRecordList-bottomTab {
		position: fixed;
		bottom: 0rpx;
		background-color: #fff;
		display: flex;
		width: 100%;
		border-top: 1rpx solid rgba(0, 0, 0, 0.05);
	
		.medicalRecordList-bottomTab1 {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 10rpx;
	
			image {
				width: 44rpx;
				height: 44rpx;
			}
	
			text {
				font-size: 20rpx;
				// font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				padding-top: 8rpx;
			}
		}
	
		.medicalRecordList-bottomTab2 {
			position: relative;
			top: -29rpx;
			border-radius: 50%;
			padding: 11rpx;
			background-color: #fff;
			border-top: 1rpx solid rgba(0, 0, 0, 0.05);
	
			image {
				width: 108rpx;
				height: 108rpx;
			}
		}
	
		.medicalRecordList-bottomTab3 {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 10rpx;
	
			image {
				width: 44rpx;
				height: 44rpx;
			}
	
			text {
				font-size: 20rpx;
				// font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				padding-top: 8rpx;
			}
		}
	}
</style>
